import React, { Component } from 'react';
import { SafeAreaView,Text } from 'react-native';
import DetailHeader from '../components/Detail/Header';
import DetailKlineWrapper from '../components/Detail/KlineWrapper';
import {detailApi} from '../api/Detail';

export default class Detail extends Component {
  state ={
    isLoading: true,
    data: {}
  }
  componentDidMount(){
    const uniqueName = this.props.navigation.state.params.uniqueName;
    console.log(uniqueName);
    this.getData(uniqueName);
  }
  getData = (uniqueName) =>{
    detailApi(uniqueName,true).then(res =>{
      if (res.success) {
        this.setState({
          uniqueName,
          isLoading: false,
          data:res.data,
        })
      } else {
        this.setState({
          uniqueName,
          isLoading: false,
        })
      }
      console.log(this.state.data)
    });
  }
  render() {
    // console.log(this.props.navigation.state.params.uniqueName)
    let {maxPrcie,minPrice,newPrice,marketValue,percentChange24h,volume24h,turnoverRate,baseCurrency,quoteCurrency,exchangeName,klineInfo} = this.state.data;
    const headerData = {maxPrcie,minPrice,newPrice,marketValue,percentChange24h,volume24h,turnoverRate};

    if (!baseCurrency && klineInfo){
      baseCurrency = klineInfo.baseCurrency;
    }
    if (!quoteCurrency && klineInfo){
      quoteCurrency = klineInfo.quoteCurrency;
    }
    if (!exchangeName && klineInfo){
      exchangeName = klineInfo.exchangeName;
    }
    const klineData = {baseCurrency,quoteCurrency,exchangeName,};
    return (
      <SafeAreaView >
        <DetailHeader data={headerData} />
        <DetailKlineWrapper data={klineData} />
        <Text> detail
        </Text>
      </SafeAreaView>
    );
  }
}

